<template>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <!-- <div id="Line" style="width: 100%;height:280px;margin-top: 10px;"></div> -->
  <dv-active-ring-chart :config="config" style="width:300px;height:300px" />
</template>

<script>
// import * as echarts from 'echarts'
export default {
  name: 'LeftTable-2',
  data() {
    return {
      config: {
        data: [
          { value: 107.69, name: '服务项目' },
          { value: 106.74, name: '设备用品' },
          { value: 106.82, name: '居住' },
          { value: 105.83, name: '娱乐文化' },
          { value: 103.74, name: '交通通讯' },
          { value: 107.91, name: '医疗保健' },
          { value: 105.43, name: '衣着' },
          { value: 107.65, name: '食品' }
        ],
        showOriginValue: true
      }
    }
  }
  // mounted() {
  //   this.showLine()
  // },
  // methods: {
  //   showLine() {
  //     // 基于准备好的dom，初始化echarts实例
  //     let myChart = echarts.init(document.getElementById('Line'), 'dark')
  //     let option
  //     // 指定图表的配置项和数据
  //     option = {
  //       color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  //       // title: {
  //       //   text: "Gradient Stacked Area Chart",
  //       // },
  //       tooltip: {
  //         trigger: 'axis',
  //         axisPointer: {
  //           type: 'cross',
  //           label: {
  //             backgroundColor: '#6a7985'
  //           }
  //         }
  //       },
  //       legend: {
  //         data: ['教育文化和娱乐类', '医疗保健类', '居住类', '交通通信类', '生活用品及服务类']
  //       },
  //       // toolbox: {
  //       //   feature: {
  //       //     saveAsImage: {},
  //       //   },
  //       // },
  //       grid: {
  //         left: '3%',
  //         right: '4%',
  //         bottom: '3%',
  //         containLabel: true
  //       },
  //       xAxis: [
  //         {
  //           type: 'category',
  //           boundaryGap: false,
  //           data: ['01', '02', '03', '04', '05']
  //         }
  //       ],
  //       yAxis: [
  //         {
  //           type: 'value'
  //         }
  //       ],
  //       series: [
  //         {
  //           name: '教育文化和娱乐类',
  //           type: 'line',
  //           stack: 'Total',
  //           smooth: true,
  //           lineStyle: {
  //             width: 0
  //           },
  //           showSymbol: false,
  //           areaStyle: {
  //             opacity: 0.8,
  //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //               {
  //                 offset: 0,
  //                 color: 'rgb(128, 255, 165)'
  //               },
  //               {
  //                 offset: 1,
  //                 color: 'rgb(1, 191, 236)'
  //               }
  //             ])
  //           },
  //           emphasis: {
  //             focus: 'series'
  //           },
  //           data: [112.6, 107.1, 107.5, 102.1, 108.7, 100, 103]
  //         },
  //         {
  //           name: '医疗保健类',
  //           type: 'line',
  //           stack: 'Total',
  //           smooth: true,
  //           lineStyle: {
  //             width: 0
  //           },
  //           showSymbol: false,
  //           areaStyle: {
  //             opacity: 0.8,
  //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //               {
  //                 offset: 0,
  //                 color: 'rgb(0, 221, 255)'
  //               },
  //               {
  //                 offset: 1,
  //                 color: 'rgb(77, 119, 255)'
  //               }
  //             ])
  //           },
  //           emphasis: {
  //             focus: 'series'
  //           },
  //           data: [112.6, 107.1, 107.5, 102.1, 108.7, 100, 103]
  //         },
  //         {
  //           name: '居住类',
  //           type: 'line',
  //           stack: 'Total',
  //           smooth: true,
  //           lineStyle: {
  //             width: 0
  //           },
  //           showSymbol: false,
  //           areaStyle: {
  //             opacity: 0.8,
  //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //               {
  //                 offset: 0,
  //                 color: 'rgb(55, 162, 255)'
  //               },
  //               {
  //                 offset: 1,
  //                 color: 'rgb(116, 21, 219)'
  //               }
  //             ])
  //           },
  //           emphasis: {
  //             focus: 'series'
  //           },
  //           data: [112.6, 107.1, 107.5, 102.1, 108.7, 100, 103]
  //         },
  //         {
  //           name: '交通通信类',
  //           type: 'line',
  //           stack: 'Total',
  //           smooth: true,
  //           lineStyle: {
  //             width: 0
  //           },
  //           showSymbol: false,
  //           areaStyle: {
  //             opacity: 0.8,
  //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //               {
  //                 offset: 0,
  //                 color: 'rgb(255, 0, 135)'
  //               },
  //               {
  //                 offset: 1,
  //                 color: 'rgb(135, 0, 157)'
  //               }
  //             ])
  //           },
  //           emphasis: {
  //             focus: 'series'
  //           },
  //           data: [112.6, 107.1, 107.5, 102.1, 108.7, 100, 103]
  //         },
  //         {
  //           name: '生活用品及服务类',
  //           type: 'line',
  //           stack: 'Total',
  //           smooth: true,
  //           lineStyle: {
  //             width: 0
  //           },
  //           showSymbol: false,
  //           label: {
  //             show: true,
  //             position: 'top'
  //           },
  //           areaStyle: {
  //             opacity: 0.8,
  //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  //               {
  //                 offset: 0,
  //                 color: 'rgb(255, 191, 0)'
  //               },
  //               {
  //                 offset: 1,
  //                 color: 'rgb(224, 62, 76)'
  //               }
  //             ])
  //           },
  //           emphasis: {
  //             focus: 'series'
  //           },
  //           data: [102.6, 107.1, 103.5, 102.2, 106.7, 100.3, 102.1]
  //         }
  //       ]
  //     }

  //     // 使用刚指定的配置项和数据显示图表。
  //     // myChart.setOption(option);
  //     option && myChart.setOption(option)
  //   }
  // }
}
</script>
<style scoped lang="scss"></style>
